<template>
    <div class="app-container home">
        <div class="title">问题类型</div>
        <div class="content">
            <div class="item" @click="problemTypeList('DLZC')">
                <img src="@/assets/problem.png" alt="" />
                <div class="tt">商户注册</div>
            </div>
            <div class="item" @click="problemTypeList('SMRZ')">
                <img src="@/assets/problem1.png" alt="" />
                <div class="tt">实名认证</div>
            </div>
            <div class="item" @click="problemTypeList('BGJS')">
                <img src="@/assets/problem2.png" alt="" />
                <div class="tt">变更结算</div>
            </div>
            <div class="item" @click="problemTypeList('SKZF')">
                <img src="@/assets/problem3.png" alt="" />
                <div class="tt">刷卡支付</div>
            </div>
            <div class="item" @click="problemTypeList('JYJS')">
                <img src="@/assets/problem4.png" alt="" />
                <div class="tt">交易结算</div>
            </div>
            <div class="item" @click="problemTypeList('QT')">
                <img src="@/assets/problem5.png" alt="" />
                <div class="tt">其他</div>
            </div>
        </div>
        <div v-for="item in questionList" :key="item.ID">
            <div v-for="(data, key) in item">
                <div class="title" style="margin-top: 10px">{{ key }}问题</div>
                <div style="margin-top: 10px">
                    <van-collapse v-model="activeName" accordion>
                        <van-collapse-item v-for="(item1, index) in data" :key="item1.ID" :title="item1.QUESTION" :name="index">
                            {{ item1.ANSWER }}
                        </van-collapse-item>
                    </van-collapse>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="problem">
import { findByType } from '../../api/wallet'
import store from '@/store/index'
const router = useRouter()
const activeName = ref('')
const questionList = ref([])
const question = () => {
    findByType({ currentPage: 1, questionType: 'RM', agencySource: store.state.user.userInfo.agentBean.agencySource }).then(res => {
        const { code, message, object } = res
        if (code == 200) {
            if (object.length) {
                questionList.value = object
            }
        }
    })
}
const problemTypeList = type => {
    router.push({
        path: '/problemTypeList',
        query: {
            type: type
        }
    })
}
question()
</script>

<style scoped lang="scss">
.app-container {
    padding: 10px;

    .title {
        font-size: 16px;
        font-family: SimHei;
        font-weight: 400;
        color: #000000;
        opacity: 1;
    }

    .content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;

        .item {
            width: 32%;
            height: 96px;
            background: #ffffff;
            margin-top: 10px;
            opacity: 1;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            img {
                height: 26px;
                width: 26px;
            }

            .tt {
                font-size: 12px;
                font-family: SimHei;
                font-weight: 400;
                color: #000000;
                margin-top: 10px;
                opacity: 1;
            }
        }
    }
}
</style>
